<template>
  <div class="edit-popup">
    <popup
      ref="popupRef"
      :title="`新增套餐(${day})`"
      :async="true"
      width="850px"
      @confirm="handleSubmit"
      @close="handleClose"
    >
      <!-- <el-input
        v-model="searchVal"
        class="m-2"
        placeholder="请输入菜单名称"
        style="width: 300px"
        :suffix-icon="Search"
        @change="changeSearch"
      /> -->
      <el-input
        v-model="searchVal"
        placeholder="请输入菜单名称"
        style="width: 300px"
      >
        <template #append>
          <el-button :icon="Search" @click="changeSearch" />
        </template>
      </el-input>
      <el-table
        ref="tableRef"
        size="large"
        height="600"
        :data="lists"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="套餐编号" prop="sn" min-width="120" />
        <el-table-column label="套餐名称" prop="mealName" min-width="100" />
        <el-table-column
          label="套餐图片"
          prop="mealPic"
          min-width="100"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <image-contain
              v-if="row.mealPic"
              :src="row.mealPic"
              :width="60"
              :height="45"
              :preview-src-list="[row.mealPic]"
              preview-teleported
              fit="contain"
            />
          </template>
        </el-table-column>
        <el-table-column label="配菜描述" prop="mealDescribe" min-width="120" />
        <el-table-column
          label="累计销售数量"
          prop="saleNumber"
          min-width="120"
        />
      </el-table>
    </popup>
  </div>
</template>
<script lang="ts" setup>
import { getOrderMealList, submitOrderMenu } from "@/api/admin/index";
import Popup from "@/components/popup/index.vue";
import { Search } from "@element-plus/icons-vue";

const dataSource = ref<any[]>([]);
const lists = ref<any[]>([]);
const day = ref<any>();
const searchVal = ref<string>();
// const selectedVal = ref<any[]>([]);
const selectedVal = reactive<any>([]);
const emit = defineEmits(["success", "close"]);
const popupRef = shallowRef<InstanceType<typeof Popup>>();
const tableRef = shallowRef();

const handleSelectionChange = (val: any) => {
  selectedVal.value = val;
};

const handleSubmit = async () => {
  popupRef.value?.close();
  emit("success", selectedVal.value);
  /* await formRef.value?.validate();
  mode.value == "edit"
    ? await editOrderMeal(formData)
    : await addOrderMeal(formData);
  popupRef.value?.close();
  emit("success"); */
};

const open = (_day: string) => {
  day.value = _day;
  popupRef.value?.open();
};

const getLists = async (mealSns: any[]) => {
  const { lists: listsData }: any = await getOrderMealList({
    pageSize: 60,
  });
  lists.value = listsData.map((row: any) => {
    row.mealId = row.id;
    return row;
  });
  dataSource.value = lists.value;
  await nextTick();
  listsData.forEach((row: any) => {
    if (mealSns.includes(row.sn)) {
      tableRef.value?.toggleRowSelection(row);
    }
  });
};

const changeSearch = () => {
  lists.value = !searchVal.value
    ? dataSource.value
    : dataSource.value.filter(({ mealName }) =>
        mealName.includes(searchVal.value)
      );
};

const handleClose = () => {
  emit("close");
};

defineExpose({
  open,
  getLists,
});
</script>
